<template>
  <div class="main">
    <p class="paomadeng">{{msg}}</p>
    <h2>全部产品</h2>
    <div class="main_box">
      <ul>
<!--                    <img src="https://shopstatic.vivo.com.cn/vivoshop/commodity/20180405/20180405101609299910_original.jpg" width="100%">-->
        <li v-for="(todo,index) in todos" :key="todo.id" @click="open(todo.id)">
          <div class="list">
            <div class="image">
              <img v-lazy="todo.homeImg" alt="图片">
            </div>
            <p class="name">{{todo.homeName}}</p>
            <p class="nametwo">{{todo.homeNametwo}}</p>
            <p class="Price">￥{{todo.homePrice}}</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import {mapState, mapMutations, mapGetters} from "vuex";

  export default {
    name: "HomeContainer",
    data() {
      return {
        msg: "fgsgsgsgstoday  好地方好的好的何电话is good  哈哈哈 安居房拉法基啦```````",
        intervalId: null
      }
    },
    props: {
      todos: Array
    },
    methods: {
      open: function (id) {
        this.$router.push({path: "goodDetail", query: {id: id}});
      },
      paomadeng() {
        if (this.intervalId != null) return;
        this.intervalId = setInterval(() => {
          var start = this.msg.substring(0, 1)
          var end = this.msg.substring(1)
          this.msg = end + start
        }, 800);
      }
    },
    mounted: function () {
      this.paomadeng()
    }
  };
</script>

<style lang="stylus" scoped>
  p{
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow:hidden;
  }
  .main h2 {
    display: block;
    height: 1.3rem;
    background: white;
    font-size: 0.35rem;
    line-height: 1.3rem;
    padding-left: 0.3rem;
  }

  .main_box {
    height: 339px;
  }

  .list {
    height: 4.7rem;
    background: white;
    float: left;
    width: 50%;
    border-right: 1px solid #f4f4f4;
    border-top: 1px solid #f4f4f4;
  }

  .list span {
    display: block;
    color: red;
    padding-left: 0.5rem;
    padding-top: 0.1rem;
  }

  .main_box ul {
    overflow: hidden;
    margin-bottom: 1.5rem;
  }

  ul li {
    list-style: none;
  }

  .Price {
    font-size: 0.33rem;
    color: red;
    margin: auto;
    text-align: center;
    font-size: 0.3rem;
  }

  .name {
    width: 80%;
    height: 0.5rem;
    line-height: 0.5rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: auto;
    font-size: 0.29rem;
    font-weight: 800;
    text-align: center;
  }

  .nametwo {
    height: 0.48rem;
    font-size: 0.1rem;
    text-align: center;
  }

  .image {
    width: 100%;
    background: white;

    img {
      width: 2.5rem;
      height: 2.3rem;
      display: block;
      margin: auto;
      margin-top: .5rem;
      margin-bottom .2rem
    }
  }

  .paomadeng {
    line-height: 1rem;
    width: 100%;
    font-size: 0.37rem;
    padding-left: 0.5rem;
    padding-right 0.5rem;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
</style>
